<template>
  <div class="index-div">
    <!-- 主页头部 -->
    <div class="index-header-div">
      <div class="index-title" @click="router.push('/index/StatisticalSummary')">招商线索管理平台</div>
      <div class="user-index">
        欢迎你，{{ name }} &nbsp;
        <img src="@/assets/img/defaultHeadImg.png" alt="头像" style="width: 40px;height: 40px;">
      </div>
    </div>
    <!-- 主页内容 -->
    <div class="index-content-div">
      <!--      左侧菜单-->
      <div class="menu-div">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu v-for="(menu,index) in menuList" :index="(index+1)+''">
            <template #title>
              <el-icon>
                <DataLine v-if="menu.icon === 'DataLine'"/>
                <Setting v-if="menu.icon === 'Setting'"/>
                <Message v-if="menu.icon === 'Message'"/>
                <Notebook v-if="menu.icon === 'Notebook'"/>
                <DeleteFilled v-if="menu.icon === 'DeleteFilled'"/>
              </el-icon>
              <span>{{ menu.menuName }}</span>
            </template>
            <el-menu-item v-for="(child,i) in menu.children" :index="(index+1)+'-'+(i+1)"
                          @click="toOpenPage(child.menuUrl)">
              {{ child.menuName }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--      右侧内容-->
      <div class="content-div">
        <router-view v-slot="{ Component }">
          <transition name="fade">
            <component :is="Component"/>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useCookies} from "vue3-cookies";
import {onMounted, ref} from "vue";

import {
  DataLine,
  DeleteFilled,
  Message, Notebook, Setting
} from '@element-plus/icons-vue'
import router from "@/assets/router";
import {getCurrentMenuListApi} from "@/assets/api/system/menu";

const {cookies} = useCookies();
const name = ref('');

// 菜单列表
const menuList = ref('');

// 获取菜单列表
const getList = () => {
  getCurrentMenuListApi().then((res) => {
    menuList.value = res.data.data.list;
  });
};

// 根据菜单跳转
const toOpenPage = (url) => {
  if (url == null)
    return;
  router.push(url);
}

const handleOpen = (key, keyPath) => {
}

const handleClose = (key, keyPath) => {
}

onMounted(() => {
  name.value = cookies.get("name");
  getList();
  // router.push("/index/StatisticalSummary");
})
</script>

<style scoped>
.index-div {
  position: relative;
  background-image: url("@/assets/img/login.png");
  background-size: cover;
  width: 100%;
  height: 100%;
}

.index-header-div {
  position: relative;
  width: 99.4%;
  height: 8%;
  border-radius: 2px;
  padding: 5px;
}

.index-title {
  cursor: pointer;
  position: absolute;
  top: 15px;
  height: 50px;
  font-family: cursive;
  font-size: 25px;
  font-weight: bold;
  color: #ededed;
  padding-top: 10px;
  padding-left: 20px;
}

.user-index {
  position: absolute;
  top: 15px;
  left: 85%;
  padding: 5px;
  color: #bfbfbf;
}

.index-content-div {
  position: relative;
  width: 99.92%;
  height: 90.2%;
  margin-top: 5px;
  border-radius: 2px;
  background-color: #f6fff3;
  overflow: auto;
}

.menu-div {
  position: absolute;
  width: 12%;
  height: 98.1%;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  overflow: auto;
  padding-bottom: 10px;
  box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2);
}

.content-div {
  position: absolute;
  left: 12.1%;
  width: 87.3%;
  height: 98.1%;
  border-radius: 2px;
  background-color: rgb(255, 255, 255);
  padding: 5px;
  overflow: auto;
  box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2);
}


/* 路由切换动画 */
/* fade-transform */
.fade-enter-active {
  transition: all 0.5s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-enter-to {
  opacity: 1;
  transform: translateX(0px);
}
</style>